<!-- 表单的组件 -->
<template>

  <div class="form-table">
    <el-table
      :data="tableData"
      border
    >
	
      <el-table-column
        label="#"
        width="50"
		
		>
        <template slot-scope="scope" >
          <div class="scope-index">
            <span>{{scope.$index + 1}}</span>
          </div>
          <div class="scope-action">
            <el-button @click="handleRemove(scope.$index)" type="danger" icon="el-icon-minus" size="mini" circle></el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.length==0"></el-table-column>
      <template v-else>
		  <!-- 显示元素名称 -->
	
        <el-table-column 
          v-for="(column,index) in columns"
          :key="column.key" 
          :label="column.name"
        
        >
          <!-- <el-input></el-input> -->
          <template slot-scope="scope">
			  <!-- 调用父组件生成具体表单 -->
				 <GenerateElementItem :blanks="blanks" is-table="table" :widget="column" v-model="scope.row[column.model]" :models.sync="tableData[scope.$index]" :remote="remote">
				  <template v-slot:[blank.name]="blankScope" v-for="blank in blanks">
					<slot :name="blank.name" :model="scope.row"></slot>
				  </template>
				</GenerateElementItem>
			
          </template>
          
        </el-table-column>
      </template>
	  
    </el-table>
    <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>
  </div>
</template>

<script>
  export default {
  components: {
    GenerateElementItem: () => import('../GenerateElementItem.vue')
  },
  props: ['columns', 'value', 'models', 'remote', 'blanks'],
  data () {
    return {
      tableData: this.value,
      dataModels: this.models
    }
  },
  methods: {
	  
    handleAddRow () {
      let item = {}
      for (let i = 0; i < this.columns.length; i++) {
        if (this.columns[i].type === 'blank') {
          item[this.columns[i].model] = this.columns[i].options.defaultType == 'String' ? '' : (this.columns[i].options.defaultType == 'Object' ? {} : [])
        } else {
          item[this.columns[i].model] = this.columns[i].options.defaultValue
        }
      }
   
      this.tableData.push(item);
	
    },

    handleRemove (index) {
		//console.log(22222222);
      this.tableData.splice(index, 1)
    },
	handleFoc(ee){
		// console.log(ee.currentTarget );
		//var delTarget = ee.currentTarget.nextElementSibling;
		//    delTarget.className = 'scope-index';
		//console.log(delTarget);
	}
  },
  watch: {
    value (val) {
      this.tableData = val
    },
    tableData (val) {
      this.$emit('input', val)
    },
    dataModels: {
      deep: true,
      handler (val) {
        this.$emit('update:models', val)
      }
    },
    models: {
      deep: true,
      handler (val) {
        this.dataModels = val
      }
    },
  },
  created(){
	  
    }
}
</script>

<style lang="scss">
.form-table{
  .el-table__empty-block{
    display: none;
  }

  .scope-action{
    display: none;
  }

  .scope-index{
    display: block;
  }

  .hover-row{
    .scope-action{
      display: block;
      .el-button{
        padding: 3px;
      }
    }

    .scope-index{
      display: none;
    }
  }
}
</style>
